<script lang="ts" setup>
defineOptions({ name: 'public-input', inheritAttrs: false })

interface Props {
  largePopWidth?: number
  largePopTitle?: string
}
interface EmitEvent {
  (e: 'confirm'): void
  (e: 'cancel'): void
}
const emit = defineEmits<EmitEvent>()
const props = defineProps<Props>()
const close = () => {
  // emit('close')
}
const inputText = ref('')
const isVoiceMode = ref(false)
const isRecording = ref(false)
const showEmojiPanel = ref(false)
const showMorePanel = ref(false)
const messages = ref([])
const messagesContainer = ref(null)
const textInput = ref(null)
// 方法
const toggleVoiceMode = () => {
  isVoiceMode.value = !isVoiceMode.value
  showEmojiPanel.value = false
  showMorePanel.value = false
}
const adjustTextareaHeight = () => {
  const textarea = textInput.value
  if (textarea) {
    textarea.style.height = 'auto'
    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
  }
}

const sendMessage = () => {
  if (inputText.value.trim()) {
    messages.value.push({
      id: Date.now(),
      type: 'sent',
      content: inputText.value.trim()
    })
    inputText.value = ''
    scrollToBottom()
    
    // 重置输入框高度
    nextTick(() => {
      if (textInput.value) {
        textInput.value.style.height = 'auto'
      }
    })
  }
}
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}
const startRecording = () => {
  isRecording.value = true
  // 这里可以添加实际的录音逻辑
}

const stopRecording = () => {
  if (isRecording.value) {
    isRecording.value = false
    // 模拟发送语音消息
    messages.value.push({
      id: Date.now(),
      type: 'voice',
      content: '',
      duration: Math.floor(Math.random() * 10) + 1,
      messageType: 'sent'
    })
    scrollToBottom()
  }
}
</script>
<template>
  <!-- 底部输入区域 -->
  <div class="input-wrapper">
    <!-- 语音按钮 -->
    <button 
      class="voice-btn"
      :class="{ active: isVoiceMode }"
      @click="toggleVoiceMode"
    >
      <svg v-if="!isVoiceMode" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
        <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
      </svg>
      <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19 11H5c-1.1 0-2 .9-2 2s.9 2 2 2h14c1.1 0 2-.9 2-2s-.9-2-2-2zM17.5 12c0 .28-.22.5-.5.5s-.5-.22-.5-.5.22-.5.5-.5.5.22.5.5zM20 12c0 .28-.22.5-.5.5s-.5-.22-.5-.5.22-.5.5-.5.5.22.5.5z"/>
      </svg>
    </button>

    <!-- 文字输入框 -->
    <div v-if="!isVoiceMode" class="text-input-wrapper">
      <textarea
        v-model="inputText"
        ref="textInput"
        class="text-input"
        placeholder="输入消息..."
        rows="1"
        @input="adjustTextareaHeight"
        @keydown.enter.exact.prevent="sendMessage"
      ></textarea>
    </div>

    <!-- 语音输入区域 -->
    <div v-else class="voice-input-wrapper">
      <button 
        class="voice-record-btn"
        :class="{ recording: isRecording }"
        @mousedown="startRecording"
        @mouseup="stopRecording"
        @mouseleave="stopRecording"
        @touchstart="startRecording"
        @touchend="stopRecording"
      >
        {{ isRecording ? '松开发送' : '按住说话' }}
      </button>
    </div>

    <!-- 发送按钮 -->
    <button 
      v-if="!isVoiceMode && inputText.trim()"
      class="send-btn"
      @click="sendMessage"
    >
      发送
    </button>
  </div>
</template>

<style scoped lang="scss">
.input-wrapper {
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  .voice-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background-color: #e0e0e0;
    }
    
    &.active {
      background-color: #07c160;
      color: white;
    }
  }
  
  .text-input-wrapper {
    flex: 1;
    .text-input {
      width: 100%;
      box-sizing: border-box;
      min-height: 40px;
      max-height: 120px;
      padding: 10px 12px;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      resize: none;
      font-size: 16px;
      line-height: 1.4;
      outline: none;
      
      &:focus {
        border-color: #07c160;
      }
    }
  }
  
  .voice-input-wrapper {
    flex: 1;
    
    .voice-record-btn {
      width: 100%;
      height: 40px;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      background-color: #f8f8f8;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        background-color: #f0f0f0;
      }
      
      &.recording {
        background-color: #07c160;
        color: white;
        border-color: #07c160;
      }
    }
  }
  
  .send-btn {
    padding: 8px 16px;
    background-color: #07c160;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: #06ad56;
    }
  }
  
  .more-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
      background-color: #f0f0f0;
    }
  }
}
.more-panel {
  border-top: 1px solid #e5e5e5;
  padding: 16px;
  background-color: #fafafa;
  
  .more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
    .more-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 16px;
      cursor: pointer;
      border-radius: 8px;
      transition: background-color 0.2s;
      
      &:hover {
        background-color: #e0e0e0;
      }
      
      .more-icon {
        width: 48px;
        height: 48px;
        background-color: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      span {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.recording-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .recording-modal {
    background-color: white;
    padding: 32px;
    border-radius: 12px;
    text-align: center;
    
    .recording-animation {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
      
      .wave {
        width: 4px;
        height: 20px;
        background-color: #07c160;
        border-radius: 2px;
        animation: wave 1s ease-in-out infinite;
        
        &:nth-child(2) {
          animation-delay: 0.1s;
        }
        
        &:nth-child(3) {
          animation-delay: 0.2s;
        }
      }
    }
    
    p {
      margin: 8px 0;
      
      &.recording-tip {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
}
</style>
